<template>
    <div>
        

        <div class="p20">
            <div style="width: 100%;margin-left: 10px;">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-form-item label="被叫号码:">
                            <el-input v-model="searchForm.atypeNum" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="4">
                    <el-form-item label="落地A路:">
                        <el-select v-model="searchForm.fallA" placeholder="请选择" @change="getRecords">
                            <el-option v-for="item in fallAGroup" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
                    </el-form-item>
                </el-col> -->
                    <el-col :span="16">
                        <el-button type="primary" @click="getRecords"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="16">
                        <el-button type="primary" @click="addTableData" v-if="permissionStore.isPermissionsBtn('011009001')"> <el-icon>
                                <CopyDocument />
                            </el-icon>导入</el-button>
                        <el-button type="danger" @click="removeTableData" v-if="permissionStore.isPermissionsBtn('011009002')"><el-icon>
                                <Delete />
                            </el-icon>批量删除</el-button>
                        <el-button type="primary" @click="applyData" v-if="permissionStore.isPermissionsBtn('011009003')">
                            <el-icon>
                                <Check />
                            </el-icon>应用</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="mt20">
                <el-table :data="tableData" style="width: 100%;height:60vh" stripe
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="85" align="center" />
                    <el-table-column type="index" width="80" label="序号" align="center" />
                    <el-table-column prop="atypeNum" label="被叫号码" align="center" />
                    <el-table-column prop="insertTime" label="添加时间" :formatter="formatDateTime" align="center" />
                    <el-table-column label="操作" align="center"  v-if="permissionStore.isPermissionsBtn(['011009004','011009005'])">
                        <template #default="scope">
                            <el-button type="warning" @click="editForm(scope.$index, scope.row)" v-if="permissionStore.isPermissionsBtn('011009004')"
                                size="default">编辑</el-button>
                            <el-button type="danger" @click="deleteForm(scope.$index, scope.row)" v-if="permissionStore.isPermissionsBtn('011009005')"
                                size="default">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 20px;">
                <el-pagination style="justify-content: center;" v-model:current-page="currentPageIndex"
                    v-model:page-size="pageSize" :page-sizes="[10, 10000]" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange" />

            </div>
        </div>

        <div>
            <el-dialog v-model="centerDialogVisible" :title="dialogTitle" width="30%" center>
                <div>
                    <el-form :model="form" label-width="120px" label-position="top">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="A路号码:">
                                    <el-input v-model="submitForm.atypeNum" placeholder="请输入A路号码" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="落地A路:">
                                    <el-input v-model="submitForm.fallA" placeholder="请输入落地A路" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="锁定:">
                                    <el-select v-model="submitForm.isLock" placeholder="请选择" style="width:100%">
                                        <el-option label="是" value="1" />
                                        <el-option label="否" value="0" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="mySubmit">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <el-dialog v-model="importDialogVisible" width="30%" center>
                <div>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="落地A路:">
                                <el-select v-model="fallASelect" placeholder="请选择">
                                    <el-option v-for="item in fallAGroup" :key="item.value" :label="item.label"
                                        :value="item.value" :disabled="item.disabled" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="锁定状态:">
                                <el-select v-model="lockVal" placeholder="请选择">
                                    <el-option v-for="item in lockStatus" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-input v-model="mutiAnum" :rows="15" type="textarea" />
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="importDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="saveAll">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <el-dialog v-model="setMutiVisible" width="30%" center>
                <div>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="落地A路:">
                                <el-select v-model="mutiform.telWayType" placeholder="请选择" @change="getMuti">
                                    <el-option v-for="item in fallAGroup" :key="item.value" :label="item.label"
                                        :value="item.value" :disabled="item.disabled" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="并发总数:">
                                <el-input v-model="mutiform.mutiCount" placeholder="请输入并发数" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="setMutiVisible = false">取消</el-button>
                        <el-button type="primary" @click="saveMuti">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { selectPage, insert, batchDelete, saveBatch, isApply, getAGroup } from "@/api/bussiness/numberA";
import { saveMutiCount, getMutiCount } from "@/api/bussiness/muti";
import { formatDateTime } from '@/utils/index'
import {
    Delete, DocumentRemove, CopyDocument, Plus, Aim, Odometer, Check, Search, Close
} from '@element-plus/icons-vue'
import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()
onMounted(() => {
    getFallAList()
    getRecords()
    // dataIn()
})
const submitForm = reactive({
    aid: '',
    atypeNum: '',
    fallA: '',
    isLock: '',
    insertTime: '',
    insertBy: '',
})
const lockVal = ref('')
const lockStatus = ref([
    {
        label: '是',
        value: 1
    },
    {
        label: '否',
        value: 0
    }
])
const fallASelect = ref('')
const mutiform = reactive({
    mid: '',
    wayType: '',
    telWayType: '',
    mutiCount: ''
})

const fallAGroup = ref([])
const mutiAnum = ref("")
const searchForm = reactive({
    atypeNum: '',
    fallA: ''
})
const tableData = ref([])
const form = reactive({
    gatewayID: '',
    ip: ''
})
const ids = ref([])
const dialogTitle = ref('')
const centerDialogVisible = ref(false)
const importDialogVisible = ref(false)
const setMutiVisible = ref(false)


const pageSize = ref(10)

const multipleSelection = ref<any>([])
const currentPageIndex = ref(1)
const total = ref()
const clearData = () => {
    searchForm.fallA = ''
    searchForm.atypeNum = ''
}

const setMutiCount = () => {
    mutiform.telWayType = ''
    mutiform.mutiCount = ''
    setMutiVisible.value = true
}
const getMuti = () => {
    mutiform.mutiCount = ''
    mutiform.mid = ''
    const params = {
        telWayType: mutiform.telWayType,
    }
    getMutiCount(params).then(res => {
        if (res.code === 200) {
            mutiform.mutiCount = res.data.mutiCount
            mutiform.mid = res.data.mid
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const getFallAList = () => {
    getAGroup().then(res => {
        if (res.code === 200) {
            fallAGroup.value = []
            res.data.forEach((item) => {
                fallAGroup.value.push({ lable: item, value: item })
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const saveMuti = () => {
    const data = {
        telWayType: mutiform.telWayType,
        mutiCount: mutiform.mutiCount,
        wayType: "A",
        mid: mutiform.mid

    }
    saveMutiCount(data).then(res => {
        setMutiVisible.value = false
        c
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })

}
const saveAll = () => {
    const params = {
        fallA: fallASelect.value,
        atypeNum: mutiAnum.value,
        isLock: lockVal.value
    }
    saveBatch(params).then(res => {
        importDialogVisible.value = false
        if (res.code === 200) {
            mutiAnum.value = ''
            fallASelect.value = ''
            lockVal.value = ''
            getRecords()
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const handleSelectionChange = (val: any) => {
    ids.value = []
    multipleSelection.value = val
    multipleSelection.value.forEach(item => {
        ids.value.push(item.aid)
    })
}
const clearObj = () => {
    submitForm.aid = '',
        submitForm.atypeNum = '',
        submitForm.fallA = '',
        submitForm.isLock = '',
        submitForm.insertTime = '',
        submitForm.insertBy = ''
}
// const dataIn = () => {
//     fallGateWay().then(res => {
//         c
//         if (res.code === 200) {
//             fallAGroup.value = []
//             res.data.forEach((item) => {
//                 fallAGroup.value.push({ lable: item, value: item })
//             })
//         }
//     })
// }
const applyData = () => {

    ElMessageBox.confirm(
        '是否应用黑名单？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            apply().then(res => {
                c
                if (res.code === 200) {
                    getRecords()
                    ElMessage({
                        message: '操作成功',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning',
                    })
                }
            })
        })
        .catch(() => {

        })

}
const mySubmit = () => {
    centerDialogVisible.value = false
    const params = {
        aid: submitForm.aid,
        atypeNum: submitForm.atypeNum,
        fallA: submitForm.fallA,
        isLock: Number(submitForm.isLock),
    }
    insert(params).then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const getRecords = () => {
    const params = {
        pageNum: currentPageIndex.value,
        pageSize: pageSize.value,
        atypeNum: searchForm.atypeNum,
        fallA: searchForm.fallA
    }
    selectPage(params).then(res => {
        if (res.code === 200) {
            tableData.value = []
            total.value = res.data.total
            tableData.value.push(...res.data.records)
            tableData.value.forEach((item) => {
                if (item.isLock) {
                    item.isLock = '1'
                } else {
                    item.isLock = '0'
                }
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPageIndex.value = val
    getRecords()
}
const handleSizeChange = (val: number) => {
    currentPageIndex.value = val
    getRecords()
}
const editForm = (index: number, row: any) => {
    dialogTitle.value = '修改表单'
    centerDialogVisible.value = true
    Object.assign(submitForm, row);
}

const deleteForm = (index: number, row: any) => {
    ids.value = []
    // if (multipleSelection.value.length > 0) {
    ElMessageBox.confirm(
        '是否删除本条数据',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ids.value.push(row.aid)
            batchDeleteAll()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const addTableData = () => {
    clearObj()
    dialogTitle.value = '新增表单'
    centerDialogVisible.value = true
}
const batchDeleteAll = () => {
    const params = {
        deleteIds: ids.value
    }
    batchDelete(params).then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const removeTableData = () => {
    if (multipleSelection.value.length > 0) {
        ElMessageBox.confirm(
            '是否删除' + multipleSelection.value.length + '条数据',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                batchDeleteAll()
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    } else {
        ElMessage({
            type: 'warning',
            message: '请选择数据',
        })
    }

}

</script>

<style scoped>
.gateInput {
    width: 50px;

}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>